<template>
  <div class="loding">
    <div class="num1" @click="details">
      <div class="num1_title bor-b-e9e9e9">
        <figure class="img1 flex_c_c_c">
          <img :src="echarts_data1.src" alt="" style="width:100%;">
        </figure>
        <figure class="img2 flex_c_c_c">
          <img :src="echarts_data1.url" alt="" style="width:100%;height: 100%;border-radius: 40px;">
        </figure>
        <ul>
          <li class="f_c_28">{{echarts_data1.name}}</li>
          <li class="c_98">{{echarts_data1.job}}</li>
        </ul>
      </div>
      <div class="num1_echarts"></div>
    </div>
    <div class="num2" v-show="echarts_2[0]">
      <div class="num2_title bor-b-e9e9e9">
        <div class="num2_img" v-for="(item,index) in echarts_2" :key="index" @click="details2(index)">
          <figure class="img1 flex_c_c_c">
            <img :src="item.src" alt=""  style="width:100%;">
          </figure>
          <figure class="img2 flex_c_c_c">
            <img :src="item.url" alt=""  style="width:100%;height: 100%;border-radius: 40px;">
          </figure>
          <ul>
            <li class="f_c_28 ellipsis w_12">{{item.name}}</li>
            <li class="c_98">{{item.job}}</li>
          </ul>
        </div>
      </div>
      <div class="num2_echarts">
      </div>
    </div>
    <div class="num3">
      <div class="num3_details" v-for="(item,index) in echarts_3" :key="index" @click="details3(index)">
        <div class="f_c_28 ellipsis w_12">{{item.name}}</div>
        <span class="c_98">{{item.job}}</span>
        <div class="num3_echarts"></div>
      </div>
    </div>
    <Loading v-show="LoadingShow"></Loading>
  </div>
</template>

<script>
import Common from "../assets/js/common.js";
let Mycommon = new Common();

let echarts = require("../../node_modules/echarts/lib/echarts");
//引入T形图组件
require("../../node_modules/echarts/lib/chart/radar");

import Loading from "./common/Loading.vue";

export default {
  components: { Loading },
  data() {
    return {
      LoadingShow: false,
      echarts_2: [],
      echarts_3: [],
      echarts_data1: {},
      routeData: {
        data1: [],
        data2: [],
        data3: []
      },
      info_com: ""
    };
  },
  mounted() {
    this.postData();
  },
  methods: {
    details() {
      // console.log(this.info_com)
      let data = this.routeData.data1[0];

      let info = this.echarts_data1;
      let info_com = this.info_com;

      this.$router.push({
        name: "AIRankDetails",
        params: {
          info: info,
          data: data,
          info_com: info_com,
          index: "1"
        }
      });
    },
    details2(index) {
      // console.log(this.info_com)
      let data = this.routeData.data2[index];
      let info = this.echarts_2[index];
      let info_com = this.info_com;

      this.$router.push({
        name: "AIRankDetails",
        params: {
          info: info,
          data: data,
          info_com: info_com,
          index: index + 2
        }
      });
      // console.log(index + 1)
    },
    details3() {
      // console.log(this.info_com)
      let data = this.routeData.data3[index];
      let info = this.echarts_3[index];
      let info_com = this.info_com;

      this.$router.push({
        name: "AIRankDetails",
        params: {
          info: info,
          data: data,
          info_com: info_com,
          index: index + 4
        }
      });
    },
    postData() {
      let that = this;
      let url = "BossAi";
      Mycommon.http({
        url: url,
        success(res) {
          
        //  that.LoadingShow = false;
          let lists = res.data.data.list;
          
          that.info_com = res.data.data.com.name;

          let max = res.data.data.max;

          let list0 = Mycommon.deepCopy(lists).splice(0, 1);
          let list1 = Mycommon.deepCopy(lists).splice(1, 2);
          let list2 = Mycommon.deepCopy(lists).splice(3);

          if (list0[0]) {
            let value0 = list0[0].value;
            that.echarts_data1 = {
              name: list0[0].info.name,
              url: list0[0].info.avatar||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png",
              job: list0[0].info.job_name || "未设置",
              id: list0[0].id,
              phone: list0[0].info.phone,
              src: require("../assets/img/jin.png")
            };

            let echarts_data0 = {
              title: [],
              datas: []
            };

            for (let i in value0) {
              echarts_data0.title.push({
                text: value0[i].titlle,
                color: "#e93636",
                max: max[i]
              });
              echarts_data0.datas.push(value0[i].value);
            }

            that.num1_echarts(echarts_data0);
          }
          if (list1[0]) {
            let aa = [
              require("../assets/img/yin.png"),
              require("../assets/img/tong.png")
            ];
            let echarts_data = [];
            list1.forEach((val, index) => {
              let title = [];
              let data = [];
              for (let i in val.value) {
                data.push(val.value[i].value);
                title.push({
                  text: val.value[i].titlle,
                  color: "#e93636",
                  max: max[i]
                });
              }
              echarts_data.push({ title: title, data: data });

              that.echarts_2.push({
                name: val.info.name,
                url: val.info.avatar||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png",
                job: val.info.job_name || "未设置",
                id: val.id,
                phone: val.info.phone,
                src: aa[index]
              });
            });

            that.num2_echarts(echarts_data);
          }
          if (list2[0]) {
            let echarts_data = [];

            list2.forEach((val, index) => {
              let title = [];
              let data = [];

              for (let i in val.value) {
                data.push(val.value[i].value);
                title.push({
                  text: val.value[i].titlle,
                  color: "#e93636",
                  max: max[i]
                });
              }
              echarts_data.push({ title: title, data: data, index: index });

              that.echarts_3.push({
                name: val.info.name,
                url: val.info.avatar||
              "http://pb14gmv45.bkt.clouddn.com/images/12/2018/09/dJJl8rANdVklRvo2RRDl8dMJnmlNlD.png",
                job: val.info.job_name || "未设置",
                id: val.id,
                phone: val.info.phone
              });
            });

            setTimeout(function() {
              that.num3_echarts(echarts_data);
            }, 500);
          }
           
          // console.log(lists)
        }
      });
    },
    num1_echarts(val) {
      this.routeData.data1.push(val);
      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("num1_echarts")[0]
      );
      // 绘制图表
      let option = {
        radar: [
          {
            indicator: val.title,
            center: ["50%", "50%"],
            radius: "70%",
            axisLine: {
              lineStyle: {
                color: "#e6e6e6"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#e6e6e6"
              }
            }
          }
        ],
        series: [
          {
            symbol: "none",
            type: "radar",
            itemStyle: {
              color: "#fff"
            },
            data: [
              {
                value: val.datas
              }
            ],
            lineStyle: {
              color: "#fff"
            },
            areaStyle: { type: "default", color: "#ef5858" }
          }
        ]
      };
      myChart.setOption(option);
    },
    num2_echarts(echarts_data) {
      echarts_data.forEach(val => {
        this.routeData.data2.push(val);
      });

      // 基于准备好的dom，初始化echarts实例
      let myChart = echarts.init(
        document.getElementsByClassName("num2_echarts")[0]
      );

      // 绘制图表
      let option = {
        radar: [
          {
            indicator: echarts_data[0].title,
            center: ["25%", "50%"],
            radius: "70%",
            axisLine: {
              lineStyle: {
                color: "#e6e6e6"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#e6e6e6"
              }
            },
            name: {
              show: false
            }
          },
          {
            indicator: echarts_data[1].title,
            center: ["75%", "50%"],
            radius: "70%",
            axisLine: {
              lineStyle: {
                color: "#e6e6e6"
              }
            },
            splitLine: {
              lineStyle: {
                color: "#e6e6e6"
              }
            },
            name: {
              show: false
            }
          }
        ],
        series: [
          {
            symbol: "none",
            type: "radar",
            itemStyle: {
              color: "#fff"
            },
            data: [
              {
                value: echarts_data[0].data,
                name: "某软件"
              }
            ],
            lineStyle: {
              color: "#fff"
            },
            areaStyle: { type: "default", color: "#ef5858" }
          },
          {
            radarIndex: "1",
            symbol: "none",
            type: "radar",
            itemStyle: {
              color: "#fff"
            },
            data: [
              {
                value: echarts_data[1].data,
                name: "某软件"
              }
            ],
            lineStyle: {
              color: "#fff"
            },
            areaStyle: { type: "default", color: "#ef5858" }
          }
        ]
      };
      myChart.setOption(option);
    },
    num3_echarts(echarts_data) {
      // console.log(document.getElementsByClassName("num3_echarts"))
      echarts_data.forEach((val, index) => {
        this.routeData.data3.push(val);

        let myChart = echarts.init(
          document.getElementsByClassName("num3_echarts")[index]
        );

        // 绘制图表
        let option = {
          radar: [
            {
              indicator: val.title,
              center: ["50%", "50%"],
              radius: "90%",
              axisLine: {
                lineStyle: {
                  color: "#e6e6e6"
                }
              },
              splitLine: {
                lineStyle: {
                  color: "#e6e6e6"
                }
              },
              name: {
                show: false
              }
            }
          ],
          series: [
            {
              symbol: "none",
              type: "radar",
              itemStyle: {
                color: "#fff"
              },
              data: [
                {
                  value: val.data,
                  name: "某软件"
                }
              ],
              lineStyle: {
                color: "#fff"
              },
              areaStyle: { type: "default", color: "#ef5858" }
            }
          ]
        };
        myChart.setOption(option);
      });
    }
  }
};
</script>

<style scoped>
.f_c_28 {
  font-size: 28px;
}
.c_98 {
  color: #989898;
}
.num1 {
  width: 100vw;
  height: 640px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
.img1 {
  width: 40px;
  height: 54px;
  padding: 0 20px 0 10px;
}
.img2 {
  width: 84px;
  height: 84px;
  margin-right: 20px;
  border-radius: 40px;
}
.num1_title {
  width: 96vw;
  height: 120px;
  display: flex;
  align-items: center;
}
.num1_echarts {
  width: 100vw;
  height: 500px;
}
.num2 {
  width: 100vw;
  height: 500px;
  background: #fff;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.num2_title {
  width: 96vw;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.num2_img {
  height: 120px;
  align-items: center;
  display: flex;
}
.num2_echarts {
  width: 100vw;
  height: 360px;
}
.num3 {
  width: 100vw;
  min-height: 300px;
  background: #fff;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
}
.num3_details {
  width: 30vw;
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 50px 10px 0 10px;
}
.num3_echarts {
  width: 20vw;
  height: 150px;
}
</style>
